// 工业视频 设备详情组件，包括 模板，emitter事件等
import Component from "../Component.js";
import ServiceUtils from "../../experience/other/shanxi/ServiceUtils.js";

const ON_LINE_STATUS = {
    '1': '在线',
    '0': '离线',
    '-1': '未检测'
}

const TRANS_MODE = {
    0: 'UDP',
    1: 'TCP'
}

export default class VcameraDetail extends Component {
    constructor() {
        super();
    }

    template() {
        const vcameraDetailPopup = `
            <div id="vcameraDetail" class="deviceDetail" style="width: 500px;height: 230px;">
                <div class="detailheader">
                    <span class="title">工业视频信息</span>
                    <i id="vcameraDetailClosePan" class="fas fa-times closeIcon"></i>
                </div>
                <div class="detailcontent">
                </div>   
            </div>
        `
        this.$$("#article").append(vcameraDetailPopup);
    }

    async control() {
        this.ServiceUtils = new ServiceUtils()
        // 创建 overlay
        this.deviceDetailOverlay = this.drawer.addOverlay('vcameraDetail','vcameraDetailClosePan')
        this.deviceDetailOverlay.setOffset([10,10])
        // 相关 emit事件的初始化
        this.emitEventInit()
    }

    emitEventInit() {
        const mode = this.utils.getUrlParamer('edit')
        const meta_id = this.utils.getUrlParamer('meta_id')
        const flag = mode == 'true' ? true : false
        this.emitter.on('vcamera-detail-open',async () => {
            if(flag) {
                return
            }

            const detailContent = this.$$('#vcameraDetail .detailcontent')
            detailContent.empty()
            const targetArgument = this.emitter.params[0]
            const device_id = targetArgument.get('device_id')
            const coordinate = targetArgument.getGeometry().getCoordinates()
            this.deviceDetailOverlay.setPosition(coordinate)
            const {data:cameralist} = await this.api.current_vcamera_data(meta_id)
            const enableNode = cameralist.find((camera) => {
                return camera.cameraIndexCode == device_id
            })
            const updateDateArr = enableNode.updateTime.split('T')
            const detailInfoContent = `
                <div class="infoitem">
                     <div class="detailname">监控点编号</div>
                     <div class="detailval">${enableNode.cameraIndexCode}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">序号</div>
                     <div class="detailval">${enableNode.index}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">监控点名称</div>
                     <div class="detailval">${enableNode.name}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">传输协议</div>
                     <div class="detailval">${TRANS_MODE[enableNode.transMode]}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">在线状态</div>
                     <div class="detailval">${ON_LINE_STATUS[enableNode.online]}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">更新时间</div>
                     <div class="detailval">${updateDateArr[0] + ' ' + updateDateArr[1]}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">描述关键词</div>
                     <div class="detailval">${enableNode.keyword}</div>              
                </div>
                
            `
            detailContent.append(detailInfoContent)
        })
    }


}
